<template>
  <div id="vipcard_set" class="container">
    <div class="content">
      <div class="title">会员卡设置</div>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <div class="right_btn" v-if="hasApi('vipAddCard')" @click="addVersion">新&nbsp;&nbsp;增</div>
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 4rem;">会员卡名称</td>
                <td style="width: 4rem;">有效范围</td>
                <td style="width: 4rem;">充值金额</td>
                <td style="width: 4rem;">创建时间</td>
                <td style="width: 4rem;">创建人</td>
                <td style="width: 2rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody" v-if="cardList&&cardList.length>0">
              <tr v-for="(item,index) in cardList" :key="index">
                <td>{{item.studentCardName}}</td>
                <td>{{cardDateTypeMap[item.cardDateType]}}</td>
                <td>￥{{item.cardMoney}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.createUserName}}</td>
                <td>
                  <span class="operate_btn" v-if="hasApi('vipEditeCard')" @click="handleEdit(item)">编辑</span>
                  &nbsp;
                  <span class="operate_btn" v-if="hasApi('vipEditeCard')" @click="handleDelete(item)">删除</span>
                </td>
              </tr>
            </tbody>
            <tbody class="tbody" v-else>
              <tr colspan="6" align="center">
                <td colspan="6" align="center">没有会员卡数据，赶紧去新建吧</td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="searchParam.currPage"
          @size-change="pageSizeChange"
          @current-change="curPageChange"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="editePopup.title" :visible.sync="editePopup.show"
      center width="30%" :close-on-click-modal="false"
      >
      <el-form ref="editeForm" :rules="editePopup.rules" :model="editePopup.form">
        <el-form-item label="会员卡名称" :label-width="formLabelWidth" prop="studentCardName">
          <el-input style="width:90%" maxlength="20" v-model="editePopup.form.studentCardName" placeholder="请输入名称" ></el-input>
        </el-form-item>
        <el-form-item label="有效范围" :label-width="formLabelWidth" prop="cardDateType">
          <el-select style="width:90%;" v-model="editePopup.form.cardDateType"
             placeholder="请选择">
              <el-option
                v-for="item in card_date_type"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="充值金额" :label-width="formLabelWidth" prop="cardMoney">
					<!-- <el-input style="width:90%" v-model.number="editePopup.form.money" autocomplete="off"></el-input> -->
           <el-input-number class="input-money" style="width:90%" v-model="editePopup.form.cardMoney" :controls="false" :precision="2"
            :step="0.1" :min="0" :max="100000000"></el-input-number>
				</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width:1.2rem;font-size: 0.16rem;" @click="editePopup.show = false">取 消</el-button>
        <el-button style="width:1.2rem;font-size: 0.16rem;" type="primary" @click="validateForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let vm;
export default {
  data() {
    var checkMoney = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error('金额必须大于0'));
      } 
      else if(value>100000000) {
        callback(new Error('金额必须小于100000000'));
      }
      else{
        callback();
      }
    };
    let checkName = (rule, value, callback) => {
      //支持字母、数字、汉字和()_-
      let result= /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\(\)\（\）\-\_]/.test(value);
      if(!result){
        callback();
      }
      else{
        callback(new Error('包含非法字符,支持：字母,数字,汉字,括号,下划线,连字符'));
      }
    };
    return {
      card_date_type:[],
      cardDateTypeMap:{},
      formLabelWidth:'120px',
      searchParam:{
        campusId:this.$store.state.campusId,
        currPage:1,
        pageSize:10,
      },
      pagination:{
        total:0,
      },
      cardList:[],
      editePopup:{
        show:false,
        title:'新建',
        type:1,//1-新增；2-编辑
        form:{
          studentCardName:null,
          cardMoney:null,
          cardDateType:null
        },
        rules: {
          studentCardName: [
            { required: true, message: '请输入会员卡名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
            { validator: checkName, trigger: 'blur' }
          ],
          cardMoney: [
						{ required: true, message: '请输入充值金额', trigger: 'blur' },
						// { type:'number', message: '充值金额必须为数字', trigger: 'blur' },
						{ validator: checkMoney, trigger: 'blur' }
					],
          cardDateType: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ]
        }
      }
      
    };
  },
  components: {},
  watch: {},
  methods: {
    init() {
      this.search(1);
    },
    campusChange : function(campusId) { //校区改变
      this.searchParam.campusId=campusId;
      this.init();
    },
    /**搜索 */
    search(pageIndex){
      this.searchParam.currPage=pageIndex||this.searchParam.currPage;
      api.vipCardList(this.searchParam).then(function(data){
        if(data.resultCode==2000){
          vm.cardList=data.list;
          vm.pagination.total=data.totalCount;
        }
      });
    },
    pageSizeChange: function(val) {
      this.searchParam.pageSize = val;
      this.search(1);
    },
    /**表格显示形式翻页 */
    curPageChange(val) {
      this.search(val);
    },
    /**新增 */
    addVersion(){
      this.editePopup.title='新建';
      this.editePopup.type=1;
      this.editePopup.show=true;
      this.$nextTick(()=>{
        vm.resetFormFields();
        vm.editePopup.form={
          studentCardName:null,
          cardDateType:null,
          cardMoney:null,
        };
      });
    },
    /**编辑 */
    handleEdit(row) {
      this.editePopup.title='编辑';
      this.editePopup.type=2;
      this.editePopup.show=true;
      this.$nextTick(()=>{
        vm.resetFormFields();
        vm.editePopup.form=tool.clone(row);
      });
    },
    /**删除 */
    handleDelete(row) {
      this.$confirm("此操作将删除该会员卡, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let param={
            studentCardId:row.studentCardId,
            studentCardName:row.studentCardName,
            cardDateType:row.cardDateType,
            cardMoney:row.cardMoney,
            campusId:this.searchParam.campusId,
            isUse:0
          };
          api.vipEditeCard(param).then(function(data){
            if(data.resultCode==2000){
              vm.$message({
                type:'success',
                message:'删除成功！'
              });
              vm.search(1);
            }
            else{
              vm.$message({
                type:'warning',
                message:data.message||'操作失败'
              });
            }
          });
        })
        .catch(() => {});
    },
    /**表单校验 */
    validateForm(){
      this.$refs['editeForm'].validate((valid) => {
        if (valid) {
          vm.editeSave();
        } else {
          return false;
        }
      });
    },
    /**重置表单 */
    resetFormFields(){
      this.$refs['editeForm'].resetFields();
    },
    /**保存确认 */
    editeSave(){
      //新增
      if(this.editePopup.type==1){
        let param={
          studentCardName:vm.editePopup.form.studentCardName,
          cardDateType:vm.editePopup.form.cardDateType,
          cardMoney:vm.editePopup.form.cardMoney,
          campusId:this.searchParam.campusId
        };
        api.vipAddCard(param).then(function(data){
          if(data.resultCode==2000){
            vm.$message({
              type:'success',
              message:'保存成功！'
            });
            vm.editePopup.show=false;
            vm.search(1);
          }
          else{
            vm.$message({
              type:'warning',
              message:data.message||'操作失败'
            });
          }
        });
      }
      //编辑
      else{
        let param={
          studentCardId:vm.editePopup.form.studentCardId,
          studentCardName:vm.editePopup.form.studentCardName,
          cardDateType:vm.editePopup.form.cardDateType,
          cardMoney:vm.editePopup.form.cardMoney,
          campusId:this.searchParam.campusId
        };
        api.vipEditeCard(param).then(function(data){
          if(data.resultCode==2000){
            vm.$message({
              type:'success',
              message:'保存成功！'
            });
            vm.editePopup.show=false;
            vm.search();
          }
          else{
            vm.$message({
              type:'warning',
              message:data.message||'操作失败'
            });
          }
        });
      }
    }
  },
  mounted() {
    vm = this;
    this.card_date_type=tool.getDictNameByValue(-100,'card_date_type');
    this.cardDateTypeMap=tool.getDictNameByValue(-100,'card_date_type',false);
    // console.log(this.card_date_type)
    this.init();
  },
  computed: {}
};
</script>
<style lang="scss">
#vipcard_set {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .input-money{
    .el-input__inner{
      text-align: left !important;
    }
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-form-item__label{
    font-size: 0.16rem;
  }
  .el-dialog__header{
    text-align: left;
  }
  .el-dialog__title{
    font-size: 0.25rem;
  }
  
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(~@/assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>